<template>
  <div class="home-page">
    <el-skeleton v-if="initialLoading" :rows="5" animated />
    
    <div v-else>
      <div class="search-section">
        <h2 class="section-title">查询城市天气</h2>
        <CitySearch
          v-model="searchCity"
          :loading="weatherStore.loading"
          @search="handleSearch"
        />
      </div>
      
      <div v-if="weatherStore.currentWeather" class="result-section">
        <WeatherCard
          :weather="weatherStore.displayWeather"
          @save="handleSave"
        />
      </div>
      
      <div v-if="recentRecords.length > 0" class="recent-section">
        <h2 class="section-title">最近查询</h2>
        <el-row :gutter="20">
          <el-col
            v-for="record in recentRecords"
            :key="record.recordId"
            :xs="24"
            :sm="12"
            :lg="8"
          >
            <WeatherCard
              :weather="record"
              :show-actions="false"
            />
          </el-col>
        </el-row>
      </div>
      
      <el-empty
        v-if="!weatherStore.currentWeather && recentRecords.length === 0"
        description="输入城市名称查询天气"
        :image-size="200"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useWeatherStore } from '@/stores/weather'
import { useRecordsStore } from '@/stores/records'
import CitySearch from '@/components/CitySearch.vue'
import WeatherCard from '@/components/WeatherCard.vue'
import { ElMessage } from 'element-plus'

const weatherStore = useWeatherStore()
const recordsStore = useRecordsStore()

const searchCity = ref('')
const initialLoading = ref(true)

// 获取最近的记录
const recentRecords = computed(() => {
  return recordsStore.records.slice(0, 6)
})

// 处理搜索
const handleSearch = async (city: string) => {
  try {
    await weatherStore.fetchWeather(city)
    
    // 如果有结果，显示预报
    if (weatherStore.currentWeather) {
      weatherStore.fetchWeatherForecast(city)
    }
  } catch (error) {
    ElMessage.error(`查询失败: ${error instanceof Error ? error.message : '未知错误'}`)
  }
}

// 保存记录
const handleSave = () => {
  if (weatherStore.currentWeather) {
    recordsStore.addRecord(weatherStore.currentWeather)
  }
}

// 页面加载时初始化
onMounted(async () => {
  try {
    // 加载历史记录
    recordsStore.loadRecords()
    
    // 如果有最近记录，显示第一条
    if (recordsStore.records.length > 0) {
      const latestCity = recordsStore.records[0].city
      await weatherStore.fetchWeather(latestCity)
    }
  } catch (error) {
    console.error('初始化失败:', error)
  } finally {
    initialLoading.value = false
  }
})
</script>

<style lang="scss" scoped>
.home-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  
  .section-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--el-text-color-primary);
  }
  
  .search-section {
    margin-bottom: 40px;
  }
  
  .result-section {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    
    .weather-card {
      max-width: 500px;
      width: 100%;
    }
  }
  
  .recent-section {
    .el-col {
      margin-bottom: 20px;
    }
  }
}

.home-page :deep(.el-skeleton) {
  padding: 20px;
  border-radius: 8px;
  background: var(--el-bg-color);
}
</style> 